<template>
	<view>
		<view class="top">
			<image class="bgImg" src="/static/user/userBg.png"></image>
			<view class="topTitle">PDF雷达锁 会员中心</view>
			<image class="topBg" src="/static/user/vip.png"></image>
			<view class="info flex flexSbetween">
				<view class="infoLeft flex">
					<image :src="userInfo.avatar"></image>
					<view class="name">
						<view>{{userInfo.nickname}}</view>
						<view class="vip flex flexSbetween">
							<view v-if="userInfo.identity == 0">尚未开通会员，无法享受会员权益</view>
							<view v-if="userInfo.identity == 1">个人会员 {{userInfo.personal_member.replace('|','至')}}</view>
							<view v-if="userInfo.identity == 2">企业会员 {{userInfo.enterprise_member.replace('|','至')}}</view>
							<view class="logout" @click="memberEquities()">查看会员权益 ></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nav flex flexSaround">
			<view class="flex navItem" :class="current == 1 ? 'active':'actived'" @click="changeNav(1)">
				<image class="navImg" :src="current == 1 ?'/static/user/vipNav3.png':'/static/user/vipNav1.png'">
				</image>
				<view>个人会员</view>
			</view>
			<view class="flex navItem" :class="current == 2 ? 'active':'actived'" @click="changeNav(2)">
				<image class="navImg" :src="current == 2 ?'/static/user/vipNav2.png':'/static/user/vipNav4.png'">
				</image>
				<view>企业会员</view>
			</view>
		</view>
		<view class="corporateMember box" v-if="current == 2">
			<view class="corporateMemberTitle">套餐选择</view>
			<radio-group class="flex flexWrap">
				<label class="flex flexWrap mt-40" style="width: 50%;" v-for="(item, index) in corporateMemberList" :key="index"
					@click="changeSetMeal(index)">
					<radio color="#FF5D44" :checked="index === setMealIdx" />
					<view class="ml-10">{{item.name}}</view>
				</label>
			</radio-group>
		</view>
		<!-- 个人会员 -->
		<scroll-view scroll-x class="scroll-view_H flex">
			<view class="box flex">
				<view class="list" v-for="item,index in memberList" :key="index" @click="chooseMember(index)">
					<!-- <image class="vipListImg" src="/static/user/vipBorder.png" v-if="memberCurrent == index"></image> -->
					<view :class="memberCurrent == index ?'vipInfo':'vipInfoed' ">
						<view class="month">{{item.title}}</view>
						<view class="monthed">￥{{item.old_price}}{{item.unit}}</view>
						<view class="price"><span class="unit">￥</span>{{item.new_price}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- <view class="hint flex flexJusCenter" v-if="current == 1">
			<u-icon name="info-circle" size="14"></u-icon>
			<view class="ml-10">到期自动扣款续费{{memberList[memberCurrent].new_price}}元，可随时取消 阅读自动续费协议。</view>
		</view> -->
		<view class="hint flex flexJusCenter" v-if="current == 2">
			<image class="laba" src="/static/user/laba.png"></image>
			<view class="ml-10">超1000万人用的pdf加密分享工具，pdf雷达锁</view>
		</view>
		<view class="payWay">
			<view class="payWayTitle">选择支付方式</view>
			<radio-group>
				<label class="flex flexSbetween mt-40"
					@click="changePay(0)" v-if="!iswexin">
					<view class="flex">
						<image class="payIcon" src="/static/user/alipay.png"></image>
						<view class="ml-20">支付宝支付</view>
					</view>
					<radio color="#416efd" :checked="payCurrent === 0" />
				</label>
				<label class="flex flexSbetween mt-40"
					@click="changePay(1)" v-if="iswexin">
					<view class="flex">
						<image class="payIcon" src="/static/user/weChatPay.png"></image>
						<view class="ml-20">微信支付</view>
					</view>
					<radio color="#416efd" :checked="payCurrent === 1" />
				</label>
			</radio-group>
		</view>
		<view class="pb-40">
			<button @click="pay">立即支付</button>
			<view class="memberAgrement flex flexJusCenter" @click="memberAgrement">点击阅读<span class="subjectColor">《付费会员协议》</span></view>
		</view>
		
		<view class="alipaysubmit" v-html="formContent"></view>
		<u-popup :show="show" mode="center" customStyle="width:90%" @close="close" round="15">
			<view class="service">
				<image class="weChatCode" :src="service.wechat_qcode" @click="prview(service.wechat_qcode)"></image>
				<view class="mt-20 flex flexJusCenter serviceText">
					扫描微信二维码添加客服
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: '',
				current: 1,
				memberList: [
					{
						new_price:0
					}
				],
				memberCurrent: 0,
				payWayList: [
					{
						name: '支付宝支付',
						icon: '/static/user/alipay.png'
					},
					{
						name: '微信支付',
						icon: '/static/user/weChatPay.png'
					},
				],
				payCurrent: 0,
				iswexin: false,
				formContent: '',
				corporateMemberList: [{
						name: '小型（20人以内使用）'
					},
					{
						name: '中型（50人以内使用）'
					},
					{
						name: '中型（100人以内使用）'
					},
					{
						name: '定制（联系客服）'
					},
				],
				setMealIdx:0,
				show:false,
				service:''
			}
		},
		onLoad(option) {
			if(option){
				this.current = option.type
			}
			if(window.location.ur){
				let a = this.getUrlCode(type)
				console.log(a)
				if(type == 'success'){
					uni.showToast({
						title:'支付'
					})
				}else{
					uni.showToast({
						title:'失败'
					})
				}
			}
		},
		onShow() {
			this.getUserInfo()
			this.getMemberList()
			this.getList()
			this.iswexin = this.isWechat()
			this.payCurrent = this.isWechat() == false ? 0 : 1
		},
		methods: {
			memberAgrement(){
				uni.navigateTo({
					url:'/pages/login/memberAgreement'
				})
			},
			prview(img){
				uni.previewImage({
					urls:img.split(','),
					success:res=> {
						this.close()
					}
				})
			},
			close(){
				this.show = false
			},
			getList(){
				let data={}
				this.api.get('api/content/init',data).then(res=>{
					if(res.code == 200){
						this.service = res.data
					}
				})
			},
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
					[, ''
					])[1]
					.replace(/\+/g, '%20')) || null
			},
			changeSetMeal(idx){
				this.setMealIdx = idx
				if(idx == 3){
					this.show = true
					return 
				}
				this.getMemberList()
			},
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			pay() {
				uni.showLoading({
					title: '正在支付，请稍后'
				})
				if (Number(this.memberList[this.memberCurrent].new_price) == 0) {
					uni.hideLoading()
					uni.showToast({
						title: '当前不可购买',
						icon: 'none'
					})
					return
				}
				if (this.payCurrent == 1) {
					if (this.iswexin) {
						var type = 'JSAPI'
					} else {
						var type = 'MWEB'
					}
					let data = {
						tradeType: type,
						thaiId: this.memberList[this.memberCurrent].id
					}
					this.api.post('api/wechat/payment', data).then(res => {
						if (res.code == 200) {
							var data = res.data
							this.weChatPay(data)
						} else {
							uni.hideLoading()
						}
					})
				} else {
					this.alipay()
				}

			},
			alipay() {
				let data = {
					tradeType: 'WAP',
					thaiId: this.memberList[this.memberCurrent].id,
					returnUrl: 'https://m.pdfjm.com/#/pages/user/member?type='+'success'
				}
				this.api.post('api/alipay/payment', data).then(res => {
					if (res.code == 200) {
						uni.hideLoading()
						var data = res.data
						this.formContent = data; // 记得data中声明该变量
						this.$nextTick(() => {
							//这里就是提交表单唤起支付宝，中括号中的name名称，要与后端给的form表单name名称一致，
							document.forms['alipaysubmit'].submit();
						});
					} else {
						uni.hideLoading()
					}
				})
			},
			weChatPay(orderInfo) {
				this.$wxPay(orderInfo, function(res) {
					/*成功的回调*/
					uni.hideLoading()
					console.log("支付成功", res)
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					})
				}, function(err) {
					uni.hideLoading()
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
					/**失败的回调*/
					console.log("支付失败或取消支付", err)
				})
			},
			getUserInfo() {
				let data = {}
				this.api.get('api/user/information', data).then((res) => {
					if (res.code == 200) {
						this.userInfo = res.data
					}
				})
			},
			changeNav(idx) {
				this.current = idx
				this.getMemberList()
			},
			chooseMember(idx) {
				this.memberCurrent = idx
			},
			getMemberList() {
				let id = ''
				let data = {
					type: this.current,
					class: id = this.current == 1 ? '' :  this.setMealIdx + 1
				}
				this.api.get('api/equity/package', data).then(res => {
					if (res.code == 200) {
						this.memberList = res.data
					}
				})
			},
			changePay(idx) {
				this.payCurrent = idx
			},
			memberEquities() {
				uni.navigateTo({
					url: '/pages/user/memberEquities?type='+this.userInfo.identity
				})
			}
		}
	}
</script>

<style>
	.memberAgrement{
		font-size: 28rpx;
	}
	.corporateMember{
		font-size: 26rpx;
	}
	.corporateMemberTitle {
		font-size: 32rpx;
		font-weight: 700;
	}

	.top {
		position: relative;
		left: 0;
		right: 0;
	}

	.bgImg {
		width: 100%;
		height: 341rpx;
		position: relative;
		left: 0;
		right: 0;
	}

	.topBg {
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		height: 154rpx;
		bottom: 10rpx;
	}

	.info {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 22rpx;
		margin: 0 30rpx;
		z-index: 99;
	}

	.topTitle {
		position: absolute;
		left: 0;
		right: 0;
		top: 60rpx;
		font-size: 40rpx;
		font-weight: 700;
		margin: 0 30rpx;
	}

	.infoLeft {
		flex: 1;
	}

	.infoLeft image {
		width: 85rpx;
		height: 85rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.name {
		font-size: 36rpx;
		font-weight: 700;
		color: #000;
		flex: 1;
	}

	.vip {
		font-size: 24rpx;
		font-weight: 500;
		margin-top: 10rpx;
		color: #474747;
	}

	.logout {
		color: #F9717A;
	}

	.nav {
		margin: 40rpx 0rpx;
	}

	.active {
		border-bottom: 6rpx solid #E4726E;
		padding-bottom: 20rpx;
		font-size: 30rpx;
		font-weight: 700;
	}

	.actived {
		padding-bottom: 26rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #353535;
	}

	.navImg {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.vipListImg {
		width: 322rpx;
		height: 239rpx;
		position: relative;
		left: 0;
		right: 0;
	}

	.box {
		margin: 20rpx;
		position: relative;
	}

	.list {
		padding: 0 10rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.vipInfo {
		/* position: absolute; */
		/* top: 0; */
		border: 5rpx solid #fdf4c7;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 80rpx;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
		padding: 13rpx 30rpx;
		background: #faf4ec;
		/* margin: 30rpx; */
	}

	.vipInfoed {
		border: 5rpx solid #ececec;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 80rpx;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
		padding: 13rpx 30rpx;
	}

	.month {
		font-size: 26rpx;
		color: #606060;
	}

	.monthed {
		font-size: 26rpx;
		color: #6B4C40;
		font-weight: 700;
		margin: 10rpx 0 20rpx 0rpx;
		text-decoration: line-through;
	}

	.unit {
		font-size: 40rpx;
	}

	.price {
		font-size: 80rpx;
		font-weight: 700;
		color: #FF5D44;
	}

	.payWay {
		font-size: 30rpx;
		color: #000;
		margin: 40rpx 30rpx;
		font-weight: 700
	}

	.payIcon {
		width: 40rpx;
		height: 40rpx;
	}

	radio {
		transform: scale(0.7);
	}

	button {
		background: #EB4146;
		color: #fff;
		border-radius: 10rpx;
		margin: 100rpx 40rpx 40rpx;
	}

	.hint {
		font-size: 24rpx;
		color: #010101;
	}

	.laba {
		width: 28rpx;
		height: 28rpx;
	}
	.service{
		padding: 60rpx 30rpx;
		text-align: center;
	}
	.weChatCode{
		width: 250rpx;
		height: 250rpx;
	}
	.serviceText{
		font-size: 28rpx;
		color: #555;
	}
</style>